<template>
  <!-- 车型配置 -->
  <page-loading :show="showPage">
    <view class="content">
      <view class="headeTb">
        <view class="barands">
          <view class="branname">
            {{productDetails.car_Type_Name}}
          </view>
          <view class="branname">
            {{productDetails.configuration_Name}}
          </view>
        </view>
        <view class="barands">
          <view class="tishi">
            *车型数据仅提供基本参考，具体配置以实车为准
          </view>
        </view>
        <view class="imgs" v-if="productDetails.car_ImageList !== undefined ">
          <view class="imgname">
            车系图片（共{{productDetails.car_ImageList.length}}张）
          </view>
          <view class="tupbox">
            <view class="imgcss" v-for="(item,index) in productDetails.car_ImageList.slice(0,4)" :key="index" @click="bigimgList(index)">
              <image :src="item.image" mode="heightFix"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="xiangq" v-for="(item,index) in carCongigs" :key="index">
        <view class="jbpeiZ">
          {{item.type}}
        </view>
        <view class="kuangnei flex flex-ac-c flex-jc-sb" v-for="(item1,index1) in item.data">
          <view class="biaot">
            {{item1.title}}
          </view>
          <view class="biaotvalue">
            {{item1.value}}
          </view>
        </view>
      </view>
    </view>
  </page-loading>
</template>
<script>
  export default {
    data() {
      return {
        productDetails: [], //车型配置样式
        carCongigs: '', //车型配置样式
        xedColorList: [], //选择后的外观颜色list
        showPage: false
      }
    },
    onLoad(types) {
      this.productDetails = JSON.parse(decodeURIComponent(types.carsList))
      console.log(this.productDetails)
    },
    // vue实例加载完成
    created() {
      this.CarViewParmeterJson()
    },
    methods: {
      // 获取车型配置
      async CarViewParmeterJson() {
        try {
          const res = await this.$api.jsonData.CarViewParmeterJson(this.productDetails.carid) //车子id
          this.carCongigs = JSON.parse(res.data.ViewParmeter)
          // this.carCongigs.forEach((item, i) => {
          //   item.value = this.filtercolor(item.data) //颜色
          // })
          this.showPage = true
        } catch (err) {
          console.log(err)
        }
      },
      //分割
      filtercolor(data) {
        let list = data.split(',')
        return list
      },

      //放大图片
      bigimgList(index) {
        // 预览图片多张
        // previewImg(index) {
        let imgsArray = []
        for (let i = 0; i < this.productDetails.car_ImageList.length; i++) {
          if (this.productDetails.car_ImageList[i].image !== '') {
            imgsArray.push(this.productDetails.car_ImageList[i].image)
          }
        }
        // #ifdef MP
        uni.previewImage({
          current: index,
          urls: imgsArray,
          indicator: 'number',
          loop: true
        })
        // #endif
        // #ifndef MP
        uni.previewImage({
          current: index,
          urls: imgsArray,
          indicator: 'number',
          loop: true
        })
        // #endif
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: rgba(246, 246, 246, 1);
  }

  .content {
    background: rgba(246, 246, 246, 1);
    padding: 0rpx 18rpx;
  }

  .headeTb {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    margin: 22rpx auto;
    padding: 0rpx 18rpx;
  }

  .barands {
    padding: 20rpx 0rpx;
    border-bottom: 1px solid #EEEEEE;
  }

  .tishi {
    font-size: 26rpx;
    color: #999999;
  }

  .branname {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #666666;
  }

  .imgs {
    margin-top: 28rpx;
  }

  .imgname {
    font-size: 26rpx;
    color: #666666;
  }

  .tupbox {
    overflow: hidden;
  }

  .imgcss {
    margin: 25rpx 0rpx;
    width: 124rpx;
    height: 124rpx;
    float: left;
    position: relative;
    margin-right: 42rpx;

    image {
      width: 162rpx;
      height: 108rpx;
      border-radius: 10rpx;
    }
  }

  .xiangq {}

  .jbpeiZ {
    font-size: 32rpx;
    // height: 80rpx;
    line-height: 80rpx;
  }

  .kuangnei {
    background-color: #FFFFFF;
    font-size: 28rpx;
    line-height: 80rpx;
    padding: 0rpx 20rpx;

    .biaot {
      color: #999999;
    }

    .biaotvalue {
      color: #333333;
      text-align: right;
      width: 300rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }


  }
</style>
